import { createStore } from 'vuex'
import createPersistedState from "vuex-plugin-persistedstate";

export default createStore({

  state: {
    // 定义购物车列表
    cartList: []
  },
  // store中的属性
  getters: {
    // 商品总数量
    totalCount(state) {
      // 计算购物车中商品的数量
      // return state.cartList.reduce((pre, item) => pre + item.count, 0)
      let res = 0
      state.cartList.forEach(item => {
        res += item.count
      })
      return res
    },
    // 选中商品的总价
    totalPrice(state) {
      let res = 0
      state.cartList.forEach(item => {
        if (item.checked) {
          res += item.count * item.price
        }
      })
      return res * 100
    }
  },
  mutations: {
    // 定义添加购物车事件
    addItem(state, payload) {
      // 如果购物车中已经存在这条商品，应该是数量+1
      // 如果购物车中没有该商品，应该是push进去
      const index = state.cartList.findIndex(item => item.id == payload.id)
      if (index > -1) {
        // 说明购物车已经有该商品, 数量+1
        state.cartList[index].count++
      } else {
        // 说明购物车中没有该商品，加入到购物车
        state.cartList.push({
          ...payload,
          count: 1, // 商品数量
          checked: false // 是否选中
        })
      }
    },
    // 通过全选按钮的变化修改cartList中checked属性
    changeChecked(state, val) {
      state.cartList.forEach(item => item.checked = val)
    },
    deleteItem(state, id) {
      // 删除当前id对应的这个商品
      // filter不改变原数组
      state.cartList = state.cartList.filter(item => item.id != id)
    }
  },
  actions: {
  },
  modules: {
  },
  plugins: [createPersistedState()],
})
